<script setup>
import { Tab, Tag, Image as VanImage, Search, Badge } from 'vant';
import { ref } from 'vue';
import { getMessagelist } from '@/api/message';
import { getFriendList } from '@/api/friends';
import { showConfirmDialog } from 'vant';
import { showDialog } from 'vant';
// 导入路由
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 定义一个变量存储id
const id = window.localStorage.getItem('id')
console.log(id);



// 定义一个mes存放请求回来的数据,点那个就显示那个的聊天记录
const mes = ref([])
const onClickLeft = () => history.back();  //顶部返回按钮
const show = ref(false); //提示
// 发送请求-------获取好友列表
getFriendList().then(res => {
    mes.value = res.data.message.filter(item => {
        return item.id == id
    })
    console.log(mes.value);
})

function message() {
    show.value = true
    // showConfirmDialog({
    //     title: '删除操作',
    //     message:
    //         '是否刪除好友\n删除后聊天记录无法找回',
    //     confirmButtonText: '删除',
    //     cancel: 'cons'
    // })
}
function toFriends() {
    showDialog({
        message: '删除成功',
    }).then(() => {
        router.push('/message/friends')

    })

}
</script>
<template>
    <div class="box">
        <div class="content" v-if="mes[0]">
            <!-- 顶部返回、显示区域 -->
            <van-nav-bar title="好友信息" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
            <!-- 头像 -->
            <div class="head_sculpture">
                <van-image style="margin: 0 auto;" fit="cover" round width="100px" height="100px" :src="mes[0].url" />

            </div>
            <h3>{{ mes[0].name }}</h3>
            <p class="desc">{{ mes[0].signature }}</p>
            <!-- 按钮 -->
            <van-button type="primary" size="large" @click="$router.push('/chat')">发送消息</van-button>

            <van-button type="primary" size="large" @click="message">删除好友</van-button>

            <van-dialog v-model:show="show" title="删除操作" show-cancel-button confirmButtonText="删除" @confirm="toFriends">
                <p class="p1">是否刪除好友</p>
                <p class="p2">删除后聊天记录无法找回</p>
            </van-dialog>
        </div>

    </div>
</template>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    background-color: rgb(249, 249, 249);

    p {
        text-align: center;
        font-size: 14px;
        color: rgb(100, 101, 102);
        margin-top: 10px;
    }

    .p2 {
        margin-bottom: 20px;
    }

    .desc {
        color: rgb(179, 103, 116);
    }
}

.head_sculpture {
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: calc(50% - 50px);
}

h3 {
    text-align: center;
    color: rgb(225, 150, 163);
}

.van-button {
    margin-top: 14px;
    color: rgb(255, 153, 3);
    background-color: #FFF;
    border: none;
}
</style>
